// * {
//   padding: 0;
//   margin: 0 auto;
//   scroll-behavior: smooth;

//   a {
//     height: 100%;
//     display: inline-block;
//     color: black;
//     text-decoration: none;
//     outline: none;
//     &:link {
//       text-decoration: none;
//       outline: none;
//       color: black;
//     }
//   }
// }
// body {
//   background-color: rgb(238, 239, 239);
//   box-sizing: border-box;

//   button {
//     cursor: pointer;
//   }
//   //   display: flex;
//   //   justify-content: center;
// }

// input {
//   border-style: none;
//   outline-style: none;
// }
// ul {
//   list-style: none;
// }
// // 顶部
// .top {
//   z-index: 5;
//   transition: all 0.3s;
//   position: fixed;
//   width: 100%;
//   height: 60px;
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   box-sizing: border-box;

//   background-color: rgb(255, 255, 255);
//   #top {
//     width: 1500px;
//     display: flex;
//     padding: 5px 20px;
//   }
//   #logo-search {
//     display: flex;
//     width: 380px;
//     height: 50px;
//   }

//   .logo {
//     width: 100px;
//     height: 50px;
//     img {
//       height: 100%;
//       width: 100%;
//     }
//   }
//   &-search {
//     position: relative;
//     display: flex;
//     border-radius: 25px;
//     box-sizing: border-box;
//     background-color: #edecec;
//     width: 240px;
//     height: 40px;
//     padding: 10px;
//     margin-top: 5px;
//     .iconfont {
//       background-color: #edecec;
//       font-size: 22px;
//       font-weight: bold;
//     }
//     .search-list {
//       display: none;
//       box-shadow: 0px 3px 5px #e8e8e8;
//       position: absolute;
//       top: 100%;
//       left: 0;
//       border-radius: 5px;
//       width: 100%;
//       background-color: #ffffff;
//       padding: 5px 5px;
//       div {
//         .iconfont {
//           line-height: 30px;
//           background-color: rgba(0, 0, 0, 0);
//           color: #d3d3d5;
//           font-weight: 100;
//         }
//         line-height: 40px;
//         font-size: 15px;
//         text-decoration: none;
//         display: inline-block;
//         width: 100%;
//         height: 40px;

//         &:hover {
//           cursor: pointer;
//           background-color: #f8f8fb;
//         }
//       }
//     }
//   }
//   #top-input {
//     background-color: rgba(0, 0, 0, 0);
//   }
// }
// // 主功能

// #fn {
//   background-color: rgb(255, 255, 255);
//   width: 550px;
//   height: 52px;
//   display: flex;
//   flex-wrap: nowrap;
//   box-sizing: border-box;
//   margin-top: 5px;
//   div {
//     width: 10%;
//     height: 100%;
//     background-color: rgb(255, 255, 253);
//     text-align: center;
//     box-sizing: border-box;
//     padding: 5px;
//     .icon {
//       width: 100%;
//       height: 90%;
//       .iconfont {
//         font-size: 28px;
//         font-weight: 600;
//       }
//       &:hover {
//         cursor: pointer;
//         color: #ff8200;
//         background-color: #fcf7f7;
//       }
//     }
//   }
// }
// .border {
//   color: #ff8200;
//   border-bottom: 4px solid #ff8200;
// }

// // 登录注册
// .access {
//   width: 400px;
//   height: 40px;
//   display: flex;

//   background-color: rgb(255, 255, 255);
//   padding: 5px 35px;
//   box-sizing: border-box;

//   #setting {
//     width: 80px;
//     background-color: white;
//     #top-setting-btn {
//       background-color: rgb(237, 236, 236);
//       width: 30px;
//       height: 30px;
//       border-radius: 50%;
//       border-style: none;
//       .iconfont {
//         font-size: 22px;
//       }
//       &:hover {
//         background-color: #d3d3d5;
//       }
//     }
//   }
//   #login-register-btn {
//     cursor: pointer;
//     display: block;
//     color: #ff8200;
//     border: 1px solid rgb(252, 144, 12);
//     outline-style: none;
//     width: 150px;
//     height: 35px;
//     border-radius: 20px;
//     font-size: 15px;
//     letter-spacing: 5px;
//     background-color: white;
//     line-height: 35px;
//     text-align: center;
//     &:hover {
//       background-color: #ff8200;
//       color: white;
//     }
//   }
// }

// #content {
//   display: flex;

//   width: 1100px;
//   position: relative;
//   top: 70px;
//   .list {
//     border-radius: 5px 5px 0 0;
//     position: fixed;
//     padding-top: 20px;
//     width: 200px;
//     height: 100%;
//     margin-left: 0px;
//     background-color: rgb(255, 255, 255);
//     p {
//       font-size: 24px;
//       padding-left: 10px;
//     }
//     ul {
//       height: auto;
//       width: 90%;
//       background-color: #ffffff;
//       a {
//         display: block;
//         box-sizing: border-box;
//         height: 60px;
//         padding: 18px 0;
//         font-size: 15px;
//         color: black;
//         text-decoration: none;
//         outline: none;
//         &:link {
//           text-decoration: none;
//           outline: none;
//           color: black;
//         }
//         span {
//           display: inline-block;
//           margin: 0 5px;
//           i {
//             font-size: 20px;
//             font-weight: 500;
//           }
//         }
//         &:hover {
//           background-color: rgb(250, 249, 248);
//         }
//       }
//     }
//   }

//   #news {
//     overflow: hidden;
//     position: relative;

//     width: 572px;

//     margin: 0 10px;
//     left: 18.8%;
//     border-radius: 5px 5px 0 0;
//     .sign {
//       border-radius: 5px 5px 5px 5px;
//       margin-bottom: 10px;
//       width: 100%;
//       height: 50px;
//       background-color: #ffffff;
//     }
//   }
// }
// .news {
//   padding: 15px 5px;
//   border-radius: 5px;
//   width: 100%;
//   box-sizing: border-box;
//   background-color: #ffffff;
//   margin-bottom: 10px;
//   .news-top {
//     display: flex;
//     padding: 10px 5px;
//     .report-remove {
//       .iconfont {
//         display: inline-block;
//         width: 20px;
//         height: 20px;
//         line-height: 20px;
//         &:hover {
//           color: #eb7350;
//         }
//       }
//       .rm-icon {
//         height: 20px;
//         text-align: center;

//         border-radius: 50%;
//         width: 20px;
//         &:hover {
//           background-color: #fff2e5;
//         }
//       }

//       cursor: pointer;
//       position: relative;
//       .rm-detials {
//         box-shadow: 2px 2px 5px #ebebeb, inset 1px 1px 3px #e2e2e2;
//         border-radius: 5px;
//         position: absolute;
//         left: -60px;
//         width: 80px;
//         background-color: #ffffff;

//         padding: 2px;
//         box-sizing: border-box;
//         li {
//           line-height: 35px;
//           text-align: center;
//           height: 35px;
//           font-size: 14px;
//           font-weight: 400;

//           &:hover {
//             background-color: #f8f8fb;
//             cursor: pointer;
//           }
//         }
//       }
//     }
//   }
//   .news-content {
//     margin-top: 20px;
//     width: 100%;
//     display: flex;
//     justify-content: flex-start;
//     flex-wrap: wrap;
//     .news-content-img {
//       margin: 2px 3.5px;
//       width: 30%;
//       border-radius: 8px;
//       height: 130px;
//       overflow: hidden;
//       cursor: pointer;

//       img {
//         object-fit: cover;
//         width: 100%;
//         height: 100%;
//         transition: all 0.4s;
//         &:hover {
//           transform: scale(1.05);
//         }
//       }
//     }
//     .tip-off-reason {
//       font-size: 12px;
//       color: #919195;
//     }
//   }
//   .head-link {
//     display: inline-block;
//     width: 60px;
//     height: 60px;
//     padding: 5px;

//     .head {
//       width: 60px;
//       height: 60px;
//     }
//     img {
//       width: 100%;
//       height: 100%;
//       object-fit: cover;
//       border-radius: 50%;
//     }
//   }

//   .top-details {
//     box-sizing: border-box;
//     display: flex;
//     flex-wrap: wrap;
//     width: 90%;
//     padding: 10px 5px;
//     .name {
//       color: black;
//       font-weight: 500;
//       text-decoration: none;
//       font-size: 20px;
//       width: 100%;
//       display: inline-block;
//     }
//     .time {
//       font-size: 13px;
//       width: 100%;
//     }
//   }
//   .top-attention {
//     width: 15%;
//     .top-attention-btn {
//       width: 80px;
//       height: 35px;
//       color: #ff8200;
//       font-size: 13px;

//       border: 1px solid #ff8200;
//       background-color: rgba(0, 0, 0, 0);
//       border-radius: 15px;

//       &:hover {
//         background-color: antiquewhite;
//       }
//       .iconfont {
//         font-size: 13px;
//       }
//     }
//   }
// }
// .news-container {
//   box-sizing: border-box;
//   width: 83%;
//   margin-left: 80px;
//   p {
//     width: 100%;
//     font-size: 15px;
//     word-wrap: break-word;
//   }
// }
// .foot {
//   display: flex;
//   width: 100%;
//   height: 25px;
//   margin-top: 5px;
//   box-sizing: border-box;

//   div {
//     width: 33%;
//     i {
//       font-size: 15px;
//     }
//     span {
//       font-size: 12px;
//     }

//     text-align: center;
//     line-height: 25px;
//     &:hover {
//       cursor: pointer;
//       color: #ff8200;
//     }
//   }
// }

// #right-bar {
//   position: relative;
//   width: 280px;
//   height: 100%;
//   margin-right: 20px;
//   #hot {
//     overflow: hidden;
//     position: fixed;
//     width: 280px;
//     height: 500px;
//     background-color: white;
//     border-radius: 5px;
//     .refresh {
//       font-size: 14px;
//       color: #c2c2c5;
//     }
//     .hot-list {
//       line-height: 30px;
//       height: 40px;

//       a {
//         font-size: 16px;
//       }

//       span {
//         display: inline-block;
//         width: 40px;
//         height: 40px;
//         text-align: center;
//         font-size: 18px;
//         font-weight: 500;
//         color: #ff8200;
//       }
//       .rank1,
//       .rank2 {
//         font-style: italic;
//         font-weight: bold;
//         color: #f26d5f;
//       }
//       .rank3 {
//         font-style: italic;
//         font-weight: 800;
//         color: #f37467;
//       }
//       .rank4,
//       .rank5,
//       .rank6,
//       .rank7,
//       .rank8,
//       .rank9,
//       .rank10 {
//         color: #ff8404;
//       }
//     }
//     .all-hot {
//       text-decoration: none;
//       background-color: #f9f9f9;
//       color: #919195;
//       display: block;
//       width: 100%;
//       height: 40px;
//       font-size: 15px;
//       text-align: center;
//       line-height: 40px;
//       &:hover {
//         color: #fe8f63;
//       }
//     }
//   }
// }

// .return-top {
//   color: #b1b1b1;
//   opacity: 0;
//   text-align: center;
//   line-height: 40px;
//   font-size: 25px;
//   background-color: white;
//   width: 40px;
//   height: 40px;
//   border-radius: 50%;
//   position: fixed;
//   margin-left: 300px;
//   bottom: 10%;
//   &:hover {
//     color: #000000;
//   }
// }

// .hot-top {
//   align-items: center;
//   .hot-top-content {
//     width: 182px;
//     font-size: 20px;
//   }

//   display: flex;
//   justify-content: space-between;
//   width: 100%;
//   height: 50px;
//   background-color: white;
//   padding: 5px 5px;
//   box-sizing: border-box;
//   .refresh {
//     display: inline-block;
//   }
// }

// .color {
//   color: #ff8200 !important;
// }

// .mask {
//   border-radius: 5px;
//   position: fixed;
//   z-index: 50;
//   top: 0;
//   left: 0;
//   width: 100%;
//   height: 100%;
//   display: none;
//   justify-content: center;
//   align-items: center;
//   background-color: rgba($color: #000000, $alpha: 0.3);
//   .window {
//     overflow: hidden;
//     border-radius: 5px;
//     width: 650px;
//     min-height: 200px;
//     background-color: #ffffff;
//     .reply-top {
//       padding-left: 10px;
//       height: 50px;
//       display: flex;
//       width: 100%;
//       background-color: #ffffff;
//       margin-bottom: 15px;
//       .top-cancel {
//         display: flex;
//         justify-content: center;
//         align-items: center;
//         box-sizing: border-box;
//         padding-bottom: 10px;
//         i {
//           font-size: 25px;
//         }
//         &:hover {
//           cursor: pointer;
//         }
//       }
//       .top-text {
//         padding-left: 10px;
//         font-size: 18px;
//         line-height: 50px;
//         width: 92%;
//         height: 100%;
//         font-weight: 550;
//         letter-spacing: 5px;
//         background-color: rgb(255, 255, 255);
//       }
//       .top-cancel {
//         width: 8%;
//         background-color: rgb(255, 255, 255);
//       }
//     }
//     .reply-container {
//       box-sizing: border-box;
//       width: 100%;
//       padding: 5px 25px;
//       .reply-text {
//         padding: 5px;
//         overflow-y: visible;
//         &::-webkit-scrollbar {
//           width: 0;
//         }
//         resize: none;
//         outline: none;
//         font-size: 20px;
//         border-radius: 5px;
//         border: 1.2px solid #f26026;
//         width: 100%;
//         min-height: 80px;
//         margin-bottom: 10px;
//       }
//       .reply-btn {
//         border: none;
//         background-color: #fe7741;
//         width: 80px;
//         border-radius: 5px;
//         height: 30px;
//         color: white;
//         font-size: 15px;
//         float: right;
//         margin-bottom: 15px;
//       }
//       .disable {
//         cursor: not-allowed;
//         background-color: #ffc180;
//       }
//     }
//   }
// }

// .mask {
//   border-radius: 5px;
//   position: fixed;
//   z-index: 50;
//   top: 0;
//   left: 0;
//   width: 100%;
//   height: 100%;
//   display: none;
//   justify-content: center;
//   align-items: center;
//   background-color: rgba($color: #000000, $alpha: 0.3);
//   .window {
//     overflow: hidden;
//     border-radius: 5px;
//     width: 650px;
//     min-height: 200px;
//     background-color: #ffffff;
//     .reply-top {
//       padding-left: 10px;
//       height: 50px;
//       display: flex;
//       width: 100%;
//       background-color: #ffffff;
//       margin-bottom: 15px;
//       .top-cancel {
//         display: flex;
//         justify-content: center;
//         align-items: center;
//         box-sizing: border-box;
//         padding-bottom: 10px;
//         i {
//           font-size: 25px;
//         }
//         &:hover {
//           cursor: pointer;
//         }
//       }
//       .top-text {
//         padding-left: 10px;
//         font-size: 18px;
//         line-height: 50px;
//         width: 92%;
//         height: 100%;
//         font-weight: 550;
//         letter-spacing: 5px;
//         background-color: rgb(255, 255, 255);
//       }
//       .top-cancel {
//         width: 8%;
//         background-color: rgb(255, 255, 255);
//       }
//     }
//     .reply-container {
//       box-sizing: border-box;
//       width: 100%;
//       padding: 5px 25px;
//       .reply-text {
//         overflow-y: visible;
//         &::-webkit-scrollbar {
//           width: 0;
//         }
//         resize: none;
//         outline: none;
//         font-size: 20px;
//         border-radius: 5px;
//         border: 1.2px solid #f26026;
//         width: 100%;
//         min-height: 80px;
//         margin-bottom: 10px;
//       }
//       .reply-btn {
//         border: none;
//         background-color: #fe7741;
//         width: 80px;
//         border-radius: 5px;
//         height: 30px;
//         color: white;
//         font-size: 15px;
//         float: right;
//         margin-bottom: 15px;
//       }
//       .disable {
//         cursor: not-allowed;
//         background-color: #ffc180;
//       }
//     }
//   }
// }
// .model {
//   display: none;
//   position: fixed;
//   z-index: 100;
//   top: 0;
//   left: 0;
//   width: 100%;
//   height: 100%;
//   background-color: rgba(0, 0, 0, 0.2);
//   justify-content: center;
//   align-items: center;
// }
// .model-img {
//   display: block;
//   max-width: 80%;
//   max-height: 80%;
// }
// .news {
//   padding: 15px 5px;
//   border-radius: 5px;
//   width: 100%;
//   box-sizing: border-box;
//   background-color: #ffffff;
//   margin-bottom: 10px;
//   .news-top {
//     display: flex;
//     padding: 10px 5px;
//     .report-remove {
//       .iconfont {
//         display: inline-block;
//         width: 20px;
//         height: 20px;
//         line-height: 20px;
//         &:hover {
//           color: #eb7350;
//         }
//       }
//       .rm-icon {
//         height: 20px;
//         text-align: center;

//         border-radius: 50%;
//         width: 20px;
//         &:hover {
//           background-color: #fff2e5;
//         }
//       }

//       cursor: pointer;
//       position: relative;
//       .rm-detials {
//         box-shadow: 2px 2px 5px #ebebeb, inset 1px 1px 3px #e2e2e2;
//         border-radius: 5px;
//         position: absolute;
//         left: -60px;
//         width: 80px;
//         background-color: #ffffff;

//         padding: 2px;
//         box-sizing: border-box;
//         li {
//           line-height: 35px;
//           text-align: center;
//           height: 35px;
//           font-size: 14px;
//           font-weight: 400;

//           &:hover {
//             background-color: #f8f8fb;
//             cursor: pointer;
//           }
//         }
//       }
//     }
//   }
//   .news-content {
//     margin-top: 20px;
//     width: 100%;
//     display: flex;
//     justify-content: flex-start;
//     flex-wrap: wrap;
//     .news-content-img {
//       margin: 2px 3.5px;
//       width: 30%;
//       border-radius: 8px;
//       height: 130px;
//       overflow: hidden;
//       cursor: pointer;

//       img {
//         object-fit: cover;
//         width: 100%;
//         height: 100%;
//         transition: all 0.4s;
//         &:hover {
//           transform: scale(1.05);
//         }
//       }
//     }
//     .tip-off-reason {
//       font-size: 12px;
//       color: #919195;
//     }
//   }
//   .head-link {
//     display: inline-block;
//     width: 60px;
//     height: 60px;
//     padding: 5px;

//     .head {
//       width: 60px;
//       height: 60px;
//     }
//     img {
//       width: 100%;
//       height: 100%;
//       object-fit: cover;
//       border-radius: 50%;
//     }
//   }

//   .top-details {
//     box-sizing: border-box;
//     display: flex;
//     flex-wrap: wrap;
//     width: 90%;
//     padding: 10px 5px;
//     .name {
//       color: black;
//       font-weight: 500;
//       text-decoration: none;
//       font-size: 20px;
//       width: 100%;
//       display: inline-block;
//     }
//     .time {
//       font-size: 13px;
//       width: 100%;
//     }
//   }
//   .top-attention {
//     width: 15%;
//     .top-attention-btn {
//       width: 80px;
//       height: 35px;
//       color: #ff8200;
//       font-size: 13px;

//       border: 1px solid #ff8200;
//       background-color: rgba(0, 0, 0, 0);
//       border-radius: 15px;

//       &:hover {
//         background-color: antiquewhite;
//       }
//       .iconfont {
//         font-size: 13px;
//       }
//     }
//   }
// }
// .comment-btn {
//   margin-left: 85%;
//   margin-top: 5px;
//   border-style: none;
//   border-radius: 5px;
//   color: white;
//   font-size: 16px;
//   font-weight: 540;
//   background-color: #ff8200;
//   width: 70px;
//   height: 30px;
// }
// .comment-btn.disable {
//   background-color: #ffc17f;
//   cursor: not-allowed;
// }
// .comment {
//   margin-top: 30px;
//   .comment-list {
//     display: flex;
//     width: 100%;

//     box-sizing: border-box;

//     a {
//       display: inline-block;
//       margin: 0 0;
//     }
//     .comment-head {
//       width: 30px;
//       height: 30px;
//       border-radius: 50%;
//       overflow: hidden;
//       img {
//         width: 100%;
//         height: 100%;
//         object-fit: cover;
//       }
//     }
//     .comment-details {
//       i {
//         cursor: pointer;
//         &:hover {
//           color: #ffc17f;
//         }
//       }
//       word-break: break-all;
//       padding: 5px 5px;
//       .comment-name {
//         text-decoration: none;
//         font-size: 15px;
//         color: #eb7350;
//       }
//       width: 89%;
//     }
//     .c-content {
//       font-weight: 400;
//       font-size: 12.5px;
//     }
//     .comment-bottom {
//       display: flex;
//       justify-content: space-around;

//       .c-time {
//         width: 340px;
//         font-size: 12.3px;
//         color: darkgray;
//       }
//       .comment-fn {
//         width: 130px;
//         display: flex;
//         justify-content: space-between;
//         .c-like {
//           padding-top: 3px;
//           font-size: 12px;
//           display: flex;
//           flex-wrap: nowrap;
//           width: 40px;
//           &:hover {
//             color: #ff8200;
//           }
//         }
//         .c-complain {
//           position: relative;
//           .iconfont {
//             display: block;
//             position: absolute;
//             top: 5px;
//             left: -16px;
//           }
//         }
//       }
//     }
//   }
//   .list2,
//   .list2-more {
//     padding-left: 55px;
//     position: relative;
//     width: 100%;
//     background-color: #ffffff;

//     box-sizing: border-box;
//     .list2-bar {
//       position: absolute;
//       width: 2px;
//       height: 100%;
//       background-color: #e3e3e6;
//     }
//     a {
//       text-decoration: none;
//       font-size: 13px;
//       display: inline-block;

//       color: #eb7350;
//     }
//     .list2-head {
//       width: 10px;
//       height: 10px;
//       border-radius: 50%;
//       overflow: hidden;
//       img {
//         width: 100%;
//         height: 100%;
//         object-fit: cover;
//       }
//     }
//     .list2-details {
//       box-sizing: border-box;
//       padding: 0px 5px;
//       .list2-content {
//         font-size: 12px;
//       }
//     }
//     .list2-bottom {
//       display: flex;
//       box-sizing: border-box;
//       padding: 0px 5px;
//       font-size: 12px;

//       .list2-time {
//         width: 370px;
//         color: #a4a4a5;
//       }
//       .list2-fn {
//         flex-grow: 1;
//         display: flex;
//         .list2-like {
//           width: 28px;
//         }
//       }
//       .iconfont {
//         font-size: 15px;
//       }
//     }
//   }
// }

// .comment-text {
//   box-sizing: border-box;
//   padding: 5px;
//   overflow-y: visible;

//   &::-webkit-scrollbar {
//     width: 0;
//   }
//   resize: none;
//   outline: none;
//   font-size: 14px;
//   border-radius: 5px;
//   border: 1px solid #f26026;
//   width: 100%;

//   height: 28px;
// }

* {
  padding: 0;
  margin: 0 auto;
  scroll-behavior: smooth;

  a {
    display: inline-block;
    color: black;
    text-decoration: none;
    outline: none;
    &:link {
      text-decoration: none;
      outline: none;
      color: black;
    }
  }
}
body {
  background-color: rgb(238, 239, 239);
  box-sizing: border-box;

  button {
    cursor: pointer;
  }
  //   display: flex;
  //   justify-content: center;
}

input {
  border-style: none;
  outline-style: none;
}
ul {
  list-style: none;
}
// 顶部
.top {
  z-index: 5;
  transition: all 0.3s;

  position: fixed;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;

  background-color: rgb(255, 255, 255);
  #top {
    width: 1500px;
    display: flex;
    padding: 5px 20px;
  }
  #logo-search {
    display: flex;
    width: 380px;
    height: 50px;
  }

  .logo {
    width: 100px;
    height: 50px;
    img {
      height: 100%;
      width: 100%;
    }
  }
  &-search {
    position: relative;
    display: flex;
    border-radius: 25px;
    box-sizing: border-box;
    background-color: #edecec;
    width: 240px;
    height: 40px;
    padding: 10px;
    margin-top: 5px;
    .iconfont {
      background-color: #edecec;
      font-size: 22px;
      font-weight: bold;
    }
    .search-list {
      display: none;
      box-shadow: 0px 3px 5px #e8e8e8;
      position: absolute;
      top: 100%;
      left: 0;
      border-radius: 5px;
      width: 100%;
      background-color: #ffffff;
      padding: 5px 5px;
      div {
        .iconfont {
          line-height: 30px;
          background-color: rgba(0, 0, 0, 0);
          color: #d3d3d5;
          font-weight: 100;
        }
        line-height: 40px;
        font-size: 15px;
        text-decoration: none;
        display: inline-block;
        width: 100%;
        height: 40px;

        &:hover {
          cursor: pointer;
          background-color: #f8f8fb;
        }
      }
    }
  }
  #top-input {
    background-color: rgba(0, 0, 0, 0);
  }
}
// 主功能

#fn {
  background-color: rgb(255, 255, 255);
  width: 550px;
  height: 52px;
  display: flex;
  flex-wrap: nowrap;
  box-sizing: border-box;
  margin-top: 5px;
  div {
    width: 10%;
    height: 100%;
    background-color: rgb(255, 255, 253);
    text-align: center;
    box-sizing: border-box;
    padding: 5px;
    .icon {
      width: 100%;
      height: 90%;
      .iconfont {
        font-size: 28px;
        font-weight: 600;
      }
      &:hover {
        cursor: pointer;
        color: #ff8200;
        background-color: #fcf7f7;
      }
    }
  }
}
.border {
  color: #ff8200;
  border-bottom: 4px solid #ff8200;
}

// 登录注册
.access {
  width: 400px;
  height: 40px;
  display: flex;

  background-color: rgb(255, 255, 255);
  padding: 5px 35px;
  box-sizing: border-box;

  #setting {
    width: 80px;
    background-color: white;
    #top-setting-btn {
      background-color: rgb(237, 236, 236);
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border-style: none;
      .iconfont {
        font-size: 22px;
      }
      &:hover {
        background-color: #d3d3d5;
      }
    }
  }
  #login-register-btn {
    cursor: pointer;
    display: block;
    color: #ff8200;
    border: 1px solid rgb(252, 144, 12);
    outline-style: none;
    width: 150px;
    height: 35px;
    border-radius: 20px;
    font-size: 15px;
    letter-spacing: 5px;
    background-color: white;
    line-height: 35px;
    text-align: center;
    &:hover {
      background-color: #ff8200;
      color: white;
    }
  }
}
// 内容

// 顶部图片

#content {
  top: 70px;
  display: flex;

  width: 1100px;
  position: relative;

  .list {
    border-radius: 5px 5px 0 0;
    position: fixed;
    padding-top: 20px;
    width: 200px;
    height: 800px;
    margin-left: 0px;
    background-color: rgb(255, 255, 255);
    p {
      font-size: 24px;
      padding-left: 10px;
    }
    ul {
      height: auto;
      width: 90%;
      background-color: #ffffff;
      a {
        display: block;
        box-sizing: border-box;
        height: 60px;
        padding: 18px 0;
        font-size: 15px;
        span {
          display: inline-block;
          margin: 0 5px;
          i {
            font-size: 20px;
            font-weight: 500;
          }
        }
        &:hover {
          background-color: rgb(237, 236, 234);
        }
        &:link {
          text-decoration: none;
          outline: none;
          color: black;
        }
      }
    }
  }

  #news {
    overflow: hidden;
    position: relative;

    width: 572px;

    margin: 0 10px;
    left: 18.8%;
    border-radius: 5px 5px 0 0;
    .sign {
      border-radius: 5px 5px 5px 5px;
      margin-bottom: 10px;
      width: 100%;
      height: 50px;
      background-color: #ffffff;
    }

    .comment-btn {
      margin-left: 85%;
      margin-top: 5px;
      border-style: none;
      border-radius: 5px;
      color: white;
      font-size: 16px;
      font-weight: 540;
      background-color: #ff8200;
      width: 70px;
      height: 30px;
    }
    .disable {
      background-color: #ffc17f;
      cursor: not-allowed;
    }
  }

  .news {
    padding: 15px 5px;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    margin-bottom: 10px;
    .news-top {
      display: flex;
      padding: 10px 5px;
      .report-remove {
        .iconfont {
          display: inline-block;
          width: 20px;
          height: 20px;
          line-height: 20px;
          &:hover {
            color: #eb7350;
          }
        }
        .rm-icon {
          height: 20px;
          text-align: center;

          border-radius: 50%;
          width: 20px;
          &:hover {
            background-color: #fff2e5;
          }
        }

        cursor: pointer;
        position: relative;
        .rm-detials {
          box-shadow: 2px 2px 5px #ebebeb, inset 1px 1px 3px #e2e2e2;
          border-radius: 5px;
          position: absolute;
          left: -60px;
          width: 80px;
          background-color: #ffffff;

          padding: 2px;
          box-sizing: border-box;
          li {
            line-height: 35px;
            text-align: center;
            height: 35px;
            font-size: 14px;
            font-weight: 400;

            &:hover {
              background-color: #f8f8fb;
              cursor: pointer;
            }
          }
        }
      }
    }
    .news-content {
      margin-top: 20px;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .news-content-img {
        margin: 2px 3.5px;
        width: 30%;
        border-radius: 8px;
        height: 130px;
        overflow: hidden;
        cursor: pointer;

        img {
          object-fit: cover;
          width: 100%;
          height: 100%;
          transition: all 0.4s;
          &:hover {
            transform: scale(1.05);
          }
        }
      }
      .tip-off-reason {
        font-size: 12px;
        color: #919195;
      }
    }
    .head-link {
      display: inline-block;
      width: 60px;
      height: 60px;
      padding: 5px;

      .head {
        width: 60px;
        height: 60px;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
      }
    }

    .top-details {
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      width: 90%;
      padding: 10px 5px;
      .name {
        color: black;
        font-weight: 500;
        text-decoration: none;
        font-size: 20px;
        width: 100%;
        display: inline-block;
      }
      .time {
        font-size: 13px;
        width: 100%;
      }
    }
    .top-attention {
      width: 15%;
      .top-attention-btn {
        width: 80px;
        height: 35px;
        color: #ff8200;
        font-size: 13px;

        border: 1px solid #ff8200;
        background-color: rgba(0, 0, 0, 0);
        border-radius: 15px;

        &:hover {
          background-color: antiquewhite;
        }
        .iconfont {
          font-size: 13px;
        }
      }
    }
  }
  .news-container {
    box-sizing: border-box;
    width: 83%;
    margin-left: 80px;
    p {
      width: 100%;
      font-size: 15px;
      word-wrap: break-word;
    }
  }
  .foot {
    display: flex;
    width: 100%;
    height: 25px;
    margin-top: 5px;
    box-sizing: border-box;

    div {
      width: 33%;
      i {
        font-size: 15px;
      }
      span {
        font-size: 12px;
      }

      text-align: center;
      line-height: 25px;
      &:hover {
        cursor: pointer;
        color: #ff8200;
      }
    }
  }
  .spread {
    display: none;
    width: 100%;
    position: relative;
    padding: 5px 20px;
    box-sizing: border-box;
    input {
      padding-left: 10px;
      border-radius: 5px;
      width: 100%;
      height: 35px;
      border: 1px solid #ff8200;
      font-weight: 500;
      letter-spacing: 2px;
    }
    .comment-ddl {
      font-size: 13px;
      color: #d3d3d5;
    }
  }
}
#right-bar {
  position: relative;
  width: 280px;
  height: 100%;
  margin-right: 20px;
  #hot {
    overflow: hidden;
    position: fixed;
    width: 280px;
    height: 500px;
    background-color: white;
    border-radius: 5px;
    .refresh {
      font-size: 14px;
      color: #c2c2c5;
    }
    .hot-list {
      display: flex;
      justify-content: flex-start;
      line-height: 30px;
      height: 40px;

      a {
        cursor: pointer;
        margin: 0 0;
        display: inline-block;
        width: 200px;
        height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
        line-height: 40px;
        width: 100%;
        height: 100%;
        display: inline-block;
        color: black;
        text-decoration: none;
        outline: none;
        &:link {
          text-decoration: none;
          outline: none;
          color: black;
        }
      }

      span {
        margin: 0 0;
        line-height: 40px;
        display: inline-block;
        width: 40px;
        height: 40px;
        white-space: nowrap;
        text-align: center;
        font-size: 18px;
        font-weight: 500;
        color: #ff8200;
      }
      .rank1,
      .rank2 {
        font-style: italic;
        font-weight: bold;
        color: #f26d5f;
      }
      .rank3 {
        font-style: italic;
        font-weight: 800;
        color: #f37467;
      }
      .rank4,
      .rank5,
      .rank6,
      .rank7,
      .rank8,
      .rank9,
      .rank10 {
        color: #ff8404;
      }
    }
    .all-hot {
      text-decoration: none;
      background-color: #f9f9f9;
      color: #919195;
      display: block;
      width: 100%;
      height: 40px;
      font-size: 15px;
      text-align: center;
      line-height: 40px;
      &:hover {
        color: #fe8f63;
      }
    }
  }
}

.return-top {
  color: #b1b1b1;
  opacity: 0;
  text-align: center;
  line-height: 40px;
  font-size: 25px;
  background-color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: fixed;
  margin-left: 300px;
  bottom: 10%;
  &:hover {
    color: #000000;
  }
}

.hot-top {
  align-items: center;
  .hot-top-content {
    width: 182px;
    font-size: 20px;
  }

  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  background-color: white;
  padding: 5px 5px;
  box-sizing: border-box;
  .refresh {
    display: inline-block;
  }
}

.comment {
  margin-top: 30px;
  .comment-list {
    display: flex;
    width: 100%;
    min-height: 50px;
    box-sizing: border-box;
    background-color: rgb(255, 255, 255);
    a {
      display: inline-block;
      margin: 0 0;
    }
    .comment-head {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .comment-details {
      i {
        cursor: pointer;
        &:hover {
          color: #ffc17f;
        }
      }
      padding: 5px 5px;
      .comment-name {
        text-decoration: none;
        font-size: 15px;
        color: #eb7350;
      }
      width: 89%;
      word-break: break-all;
    }
    .c-content {
      letter-spacing: 0.1px;
      font-weight: 400;
      font-size: 12.5px;
    }
    .comment-bottom {
      display: flex;
      justify-content: space-around;
      .c-time {
        width: 340px;
        font-size: 12.3px;
        color: darkgray;
      }
      .comment-fn {
        width: 130px;
        display: flex;
        justify-content: space-between;
        .c-like {
          padding-top: 3px;
          font-size: 12px;
        }
      }
    }
  }
  .list2 {
    padding-left: 55px;
    position: relative;
    width: 100%;
    background-color: #ffffff;

    box-sizing: border-box;
    .list2-bar {
      position: absolute;
      width: 2px;
      height: 100%;
      background-color: #e3e3e6;
    }
    a {
      text-decoration: none;
      font-size: 13px;
      display: inline-block;

      color: #eb7350;
    }
    .list2-head {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .list2-details {
      box-sizing: border-box;
      padding: 0px 5px;
      .list2-content {
        font-size: 12px;
      }
    }
    .list2-bottom {
      box-sizing: border-box;
      padding: 0px 5px;
      font-size: 12px;
      color: #a4a4a5;
    }
  }
}

.color {
  color: #ff8200;
}

.mask {
  border-radius: 5px;
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  background-color: rgba($color: #000000, $alpha: 0.3);
  .window {
    overflow: hidden;
    border-radius: 5px;
    width: 650px;
    min-height: 200px;
    background-color: #ffffff;
    .reply-top {
      padding-left: 10px;
      height: 50px;
      display: flex;
      width: 100%;
      background-color: #ffffff;
      margin-bottom: 15px;
      .top-cancel {
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding-bottom: 10px;
        i {
          font-size: 25px;
        }
        &:hover {
          cursor: pointer;
        }
      }
      .top-text {
        padding-left: 10px;
        font-size: 18px;
        line-height: 50px;
        width: 92%;
        height: 100%;
        font-weight: 550;
        letter-spacing: 5px;
        background-color: rgb(255, 255, 255);
      }
      .top-cancel {
        width: 8%;
        background-color: rgb(255, 255, 255);
      }
    }
    .reply-container {
      box-sizing: border-box;
      width: 100%;
      padding: 5px 25px;
      .reply-text {
        padding: 5px;
        overflow-y: visible;
        &::-webkit-scrollbar {
          width: 0;
        }
        resize: none;
        outline: none;
        font-size: 20px;
        border-radius: 5px;
        border: 1.2px solid #f26026;
        width: 100%;
        min-height: 80px;
        margin-bottom: 10px;
      }
      .reply-btn {
        border: none;
        background-color: #fe7741;
        width: 80px;
        border-radius: 5px;
        height: 30px;
        color: white;
        font-size: 15px;
        float: right;
        margin-bottom: 15px;
      }
      .disable {
        cursor: not-allowed;
        background-color: #ffc180;
      }
    }
  }
}

.comment-text {
  box-sizing: border-box;
  padding: 5px;
  overflow-y: visible;

  &::-webkit-scrollbar {
    width: 0;
  }
  resize: none;
  outline: none;
  font-size: 14px;
  border-radius: 5px;
  border: 1px solid #ff8200;
  width: 100%;

  height: 28px;
}

// 关注后的样式
.top-attention-btn.already {
  cursor: not-allowed;
  color: #b1b1b1 !important;
  font-size: 12px !important;
  border: 1px solid #b1b1b1 !important;
  &:hover {
    background-color: #f7f4f4 !important;
  }
}

// 更多评论弹窗
.more-reply-mask {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;

  top: 0;
  left: 0;
  z-index: 50;
  background-color: rgba(0, 0, 0, 0.2);

  align-items: center;
  justify-content: center;
  .more-window {
    width: 550px;
    overflow: hidden;
    height: 600px;
    background-color: white;
    border-radius: 10px;
    .window-top {
      height: 50px;
      margin-bottom: 10px;
      padding-top: 10px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      .window-top-text {
        margin: 0 10px;
        width: 50px;
        height: 100%;
        font-size: 18px;
        font-weight: 500;
      }
      .window-top-cancel {
        cursor: pointer;
        margin: 0 5px;
        width: 30px;
        height: 100%;
      }
    }
    // 弹窗内容
    .window-content {
      width: 100%;
      height: 90%;

      overflow-y: auto;
      .content-comment {
        height: 800px;
      }
      .window-item1 {
        width: 100%;

        overflow: hidden;
        .item1-list {
          display: flex;
          justify-content: flex-start;

          a {
            display: inline-block;

            height: 40px;
            margin: 0 10px;

            .item1-head {
              width: 100%;
              height: 100%;
              border-radius: 50%;
              overflow: hidden;
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
          }
          .item1-details {
            margin: 0px 0px;
            .details-name {
              height: 20px;
              font-size: 15px;
              color: #eb7350;
              font-weight: 100;
            }
            .bottom-time {
              box-sizing: border-box;
              padding-left: 10px;
              font-size: 12px;
              font-weight: lighter;
            }
          }
        }
      }
      // 二级评论
      .window-list2 {
        padding-left: 80px;
        position: relative;
        width: 100%;

        box-sizing: border-box;
        .window-list2-bar {
          margin-right: 10px;
          position: absolute;
          width: 2px;
          height: 100%;
          background-color: #e6e6e7;
        }
        .window-list2-details {
          a {
            text-decoration: none;
            color: #eb7350;
          }
          font-size: 12px;
          padding-left: 5px;
          box-sizing: border-box;
        }
        .window-list2-bottom {
          font-size: 10px;
          padding-left: 5px;
          box-sizing: border-box;
        }
      }
    }
  }
}

// 更多回复图标
.list2 {
  .iconfont {
    color: #eb7350;
    font-size: 12px;
  }
}
.model {
  display: none;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  justify-content: center;
  align-items: center;
}
.model-img {
  display: block;
  max-width: 80%;
  max-height: 80%;
}
